import React from "react";
import { Tag, Space } from "react-vant";
class ListItem extends React.Component {
  state = {
    isError: false,
  };
  render() {
    try {
      const { v } = this.props;
      const { isError } = this.state;
      if (isError) {
        return "报错了！！！";
      }
      return (
        <div
          className="list-item"
          style={{ padding: 10, borderBottom: "1px solid #ccc" }}
        >
          <div
            className="item-between"
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <h3>
              {v.title}({v.product})
            </h3>
            <span>
              <b style={{ color: "red" }}> {v.price}</b>起
            </span>
          </div>
          <div
            className="item-between"
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <span>{v.address}</span>
            <span>{v.disance}KM</span>
            {/* {v.q.q.q.q} */}
          </div>
          <Space>
            {v.tags.map((v, i) => {
              return (
                <Tag type={v.type} key={i}>
                  {v.name}
                </Tag>
              );
            })}
          </Space>
        </div>
      );
    } catch {
      this.setState({
        isError: true,
      });
    }
  }

  componentDidCatch() {
    console.log("发生错误了！！");
    this.setState({
      isError: true,
    });
  }
}

export default ListItem;
